<template>

  <div class="relative animate-from-right">              
    <div>
      <h2 class="text-[30px] font-bold">欢迎回来 👋🏻</h2>
      <p class="text-[14px]  --el-text-color-primary mt-[10px] mb-[30px]">请登录您的账户信息以开始管理您的项目</p>
    </div>
        
  
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        size="large"
    >
        <el-form-item :label="$t('login.username')" prop="username">
        <el-input v-model="ruleForm.username"/>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password">
        <el-input
            v-model="ruleForm.password"
            type="password"
              show-password 
        />
        </el-form-item>
        <el-form-item prop="isPassing" class="!mb-0">
        <drag-verify
          :width="dragVerifyData.width"
          ref="dragVerify"
          :isPassing.sync="ruleForm.isPassing"
          :text="dragVerifyData.text"
          :background="dragVerifyData.background"
          :handlerBg="dragVerifyData.handlerBg"
          class="border-[1px] border-[var(--el-border-color)]"
          :successText="dragVerifyData.successText"
          :handlerIcon="dragVerifyData.handlerIcon"
          :successIcon="dragVerifyData.successIcon"
          @passcallback="PassCallback"  
          >
        </drag-verify>
        </el-form-item>
        <el-row class="flex items-center justify-between mt-[15px]">
              <el-checkbox label="记住账号"  v-model="isRemeber" @change="setIsRremember"/>
              <el-button type="primary" link @click="goPage('forgetPassword')">忘记密码？</el-button>
        </el-row>
          <el-button type="primary" class="w-full mt-[15px]" @click="pageLogin">登录</el-button>
    </el-form>

      <el-row class="mt-[15px] flex items-center justify-between">
        <el-button plain class="w-[45%]" @click="goPage('phoneLogin')">手机号登录</el-button>
        <el-button plain class="w-[45%]" @click="goPage('chatLogin')">扫码登录</el-button>
      </el-row>
      <el-divider class="bg-[none]"> <div class="text-[12px]">其他登录方式 </div></el-divider>
      <el-row class="flex items-center justify-center space-x-3">
          <span class="iconfont">&#xe636;</span>
          <span class="iconfont">&#xe7ba;</span>
          <span class="iconfont">&#xe607;</span>
          <span class="iconfont">&#xe64b;</span>
      </el-row>
      <el-row class="flex items-center justify-center w-full text-sm font mt-[15px]">
          还没有其他账号？
          <el-button type="primary" @click="goPage('register')" link>创建账号</el-button>
      </el-row>
  </div>
</template>

<script setup lang='ts'>
import { login } from '@/api/auth';
import { setToken,removeToken,getToken } from '@/composables/auth';
import { toast } from '@/composables/utils';
// //login({url:'auth/login',method:'post',data:{username:'321',password:'12345678'}}).then(res=>{
//   console.log(res)
// })





/**路由跳转**/
const router =useRouter()
const goPage=(path:any)=>{
  router.push(path)
}
/**记住账号**/
let isRemeber=ref(false)
isRemeber.value=localStorage.getItem('username')?true:false

/**是否选中记住账号**/
const setIsRremember=(e:any)=>{
 if(ruleForm.username.length<=0) return 
 isRemeber.value=e
 if(isRemeber.value){
  localStorage.setItem('username',ruleForm.username)
 }else{
    localStorage.removeItem('username')
 }
}

import type {FormRules} from 'element-plus'
/**获取form**/
const ruleFormRef = ref()
/**提交数据**/
const ruleForm = reactive({
  username: localStorage.getItem('username')?localStorage.getItem('username')!:'',
  password: '',
  isPassing:false
})

watch(
   () => ruleForm.username,
  (newUser) => {
    if(isRemeber.value){
      localStorage.setItem('username',newUser)
    }
    if(!newUser){
      isRemeber.value=false
       localStorage.removeItem('username')
    }
  },
  { deep: true,immediate: true}
)


/**验证滑块数据**/
let dragVerifyData=ref({
  width:0,
  text:'请按住滑块拖动',
  successText:'验证通过',
  //isPassing:false,
  background:'none',
  handlerBg:'',
  handlerIcon:'iconfont icon-jiantou_yemian_xiangyou_o !text-[24px]',
  successIcon:'iconfont icon-chenggong !text-[24px]'
})
/**滑块初始高度**/
onMounted(()=>{
  dragVerifyData.value.width=ruleFormRef.value.$el.offsetWidth

})
/**浏览器变化时重新计算滑块宽度**/
window.addEventListener('resize', () => {
    dragVerifyData.value.width=ruleFormRef.value.$el.offsetWidth
})

/**系统模式变化时改变颜色**/
import {stCustomTheme} from '@/stores/setThem'
watch(()=>stCustomTheme().theme,(newVal)=>{
  if(newVal=='dark'){
    dragVerifyData.value.handlerBg="#1d1e1f"
  }else{
    dragVerifyData.value.handlerBg="#fff"
  }
},{deep:true,immediate:true})

/**滑块移动至最右边时 表示验证成功**/
const PassCallback=()=>{
  ruleForm.isPassing=true
  console.log('验证通过')
  dragVerifyData.value.text=dragVerifyData.value.successText
  dragVerifyData.value.handlerIcon=dragVerifyData.value.successIcon
}

/**用户名验证**/
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请填写用户名'))
  } else {
    // if (ruleForm.username !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('username')
    // }
    callback()
  }
}
/**密码验证**/
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请填写密码'))
  } else {
    callback()
  }
}

/**验证条验证**/

//验证方式 表单失焦时验证
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: validateUsername, trigger:['blur','change'] }],
  password: [{ validator: validatePassword, trigger: ['blur','change'] }],
  isPassing:[{ validator: (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请先完成验证'))
  } else {
    callback()
  }
}, trigger: 'blur' }]
})

import {user} from '@/stores/userInfo'
import CustomLoading from '@/components/customLoading.vue';

//登录
const pageLogin=async()=>{
   try {
        await ruleFormRef.value.validate();
        let res=await login({username:ruleForm.username,password:ruleForm.password})
           setToken(res.data?.token)
           goPage('/home')
        
       
        //
       
        
      } catch (error:any) {
      
      }
}
</script>

<style scoped lang='scss'>

</style>